<template>
  <div>
    <!-- 搜索 -->
    <van-search
      style="position: fixed; top: 15px; z-index: 1; width: 100%"
      disabled
      show-action
      placeholder="请输入小区或地址"
      background="rgba(0,0,0,0)"
    >
      <!-- 自定义左侧 -->
      <template #label>
        <div ref="currentCity" @click="$router.push('/city')">{{ city }}</div>
      </template>
      <!-- 自定义右侧 -->
      <template #action>
        <van-icon @click="$router.push('/map')" name="guide-o" color="#fff" />
      </template>
    </van-search>

    <!-- 轮播图 -->
    <van-swipe :autoplay="3000" :width="375" indicator-color="#ccc">
      <van-swipe-item v-for="(image, index) in images" :key="index">
        <img style="width: 100%; height: 215px" v-lazy="image" />
        <!-- <img style="width: 100%; height: 215px" v-lazy="image.imgSrc" /> -->
      </van-swipe-item>
    </van-swipe>

    <!-- 金刚区 -->
    <van-grid :border="false" icon-size="60px">
      <van-grid-item to="/list" :icon="icon1" text="整租" />
      <van-grid-item to="/list" :icon="icon2" text="合租" />
      <van-grid-item :icon="icon3" text="地图找房" />
      <van-grid-item to="/rent/add" :icon="icon4" text="去出租" />
    </van-grid>

    <!-- 租房小组 -->
    <div class="group">
      <div class="group-title">
        <h3>租房小组</h3>
        <span class="more">更多</span>
      </div>
      <van-grid :gutter="10" direction="horizontal" :column-num="2">
        <van-grid-item
          v-for="item in list"
          :key="item.id"
          style="width: 172px; height: 60px"
          :icon="'http://liufusong.top:8080' + item.imgSrc"
          :text="item.title + item.desc"
        />
        <!-- <van-grid-item
          style="width: 172px; height: 60px"
          icon="http://115.159.87.220:8080/img/groups/2.png"
          text="宜居四五环大都市生活"
        />
        <van-grid-item
          style="width: 172px; height: 60px"
          icon="http://115.159.87.220:8080/img/groups/3.png"
          text="喧嚣三里屯繁华的背后"
        />
        <van-grid-item
          style="width: 172px; height: 60px"
          icon="http://115.159.87.220:8080/img/groups/4.png"
          text="比邻十号线地铁心连心"
        /> -->
      </van-grid>
    </div>
  </div>
</template>

<script>
import { getCityToken, getCityValueToken, setCityToken, setCityValueToken } from '@/utils/storage'
import { getCityInfoByName, getRentGroup, getSwiperImage } from '@/api/list'
// import { getCityInfoByName } from '@/api/list'
// import { getRentGroup } from '@/api/list'
// import { getSwiperImage } from '@/api/list'
export default {
  name: 'HomePage',
  computed: {
    city () {
      return getCityToken() || '上海'
    }
  },
  data () {
    return {
      // cityName: '上海',
      list: [],
      images: [],
      icon1:
        '',
      icon2:
        '',
      icon3:
        '',
      icon4:
        ''
    }
  },
  async created () {
    // 根据城市名称获取该城市信息
    const res = await getCityInfoByName(getCityToken())
    console.log(res)
    console.log('根据城市名称获取该城市信息成功')
    if (!getCityToken()) {
      setCityValueToken(res.body.value)
      setCityToken(res.body.label)
    }

    // 获取轮播图
    const resSwiper = await getSwiperImage()
    // console.log(resSwiper)
    for (const k in resSwiper.body) {
      this.images[k] = 'http://liufusong.top:8080' + resSwiper.body[k].imgSrc
    }
    console.log('获取轮播图信息成功')

    // 租房小组
    const id = getCityValueToken()
    const resRent = await getRentGroup(id)
    console.log('获取租房小组信息成功')
    // console.log(resRent)
    this.list = resRent.body
  }
}
</script>

<style lang="less" scoped>
.group {
  height: 192px;
  background-color: #f6f5f6;
  .group-title {
    display: flex;
    justify-content: space-between;
    align-items: center;
    h3 {
      font-size: 15px;
      margin-left: 20px;
      // font-weight: bold;
    }
    .more {
      font-size: 14px;
      margin-right: 10px;
      color: #787d82;
    }
  }
}
</style>
